<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<meta http-equiv="X-UA-Compatible" content="ie=edge">
<title>mapDemo</title>
<script src="https://js.arcgis.com/4.10/"></script>
</head>
<body>
<h2>加载WMTS</h2>
<div id="mapViewDiv" style="height:600px;width:100%"></div>
<script>
	
	var layerUrl = "http://19.128.104.232:12345/ServiceAccess/WMTS/佛山电子地图_2018_WMTS_CGCS2000/bdad44b12f824672ccf5ae2f11176534";

	require(["esri/layers/WebTileLayer",
		"esri/geometry/SpatialReference",
		"esri/layers/support/TileInfo"], function(WebTileLayer,SpatialReference,TileInfo) {
		var spatialReference = new SpatialReference({
			"wkid": 4490
		});
		var tileInfo = new TileInfo({
			dpi: 96,
			rows: 256,
			cols: 256,
			compressionQuality: 0,
			origin: {
				x: -180.0,
				y: 90.0
			},
			spatialReference:spatialReference,
			lods: [
				{ level: 0, resolution: 1.440757911807387, scale: 572801561.066994 },
				{ level: 1, resolution: 0.70312500000000022, scale: 279541132.0143238 },
				{ level: 2, resolution: 0.35156250000000011, scale: 139770566.0071619 },
				{ level: 3, resolution: 0.17578125000000006, scale: 69885283.00358094 },
				{ level: 4, resolution: 0.087890625000000028, scale: 34942641.50179047 },
				{ level: 5, resolution: 0.043945312500000014, scale: 17471320.750895236 },
				{ level: 6, resolution: 0.021972656250000007, scale: 8735660.375447618 },
				{ level: 7, resolution: 0.010986328125000003, scale: 4367830.187723809 },
				{ level: 8, resolution: 0.0054931640625000017, scale: 2183915.0938619045 },
				{ level: 9, resolution: 0.0027465820312500009, scale: 1091957.5469309522 },
				{ level: 10, resolution: 0.0013732910156250004, scale: 545978.7734654761 },
				{ level: 11, resolution: 0.00068664550781250022, scale: 272989.38673273806 },
				{ level: 12, resolution: 0.00034332275390625011, scale: 136494.69336636903 },
				{ level: 13, resolution: 0.00017166137695312505, scale: 68247.34668318451 },
				{ level: 14, resolution: 0.000085830688476562527, scale: 34123.67334159226 },
				{ level: 15, resolution: 0.000042915344238281264, scale: 17061.83667079613 },
				{ level: 16, resolution: 0.000021457672119140632, scale: 8530.918335398064 },
				{ level: 17, resolution: 0.000010728836059570316, scale: 4265.459167699032 },
				{ level: 18, resolution: 0.0000053644180297851579, scale: 2132.729583849516 },
				{ level: 19, resolution: 0.000002682209014892579, scale: 1066.364791924758 },
				{ level: 20, resolution: 0.0000013411045074462895, scale: 533.182395962379 },
				
				<!-- { level: 0, resolution: 1.440757911807387, scale: 605497593.05875003 }, -->
				<!-- { level: 1, resolution: 0.70312500000000022, scale: 295497593.05875003 }, -->
				<!-- { level: 2, resolution: 0.35156250000000011, scale: 147748796.52937502 }, -->
				<!-- { level: 3, resolution: 0.17578125000000006, scale: 73874398.264687508 }, -->
				<!-- { level: 4, resolution: 0.087890625000000028, scale: 36937199.132343754 }, -->
				<!-- { level: 5, resolution: 0.043945312500000014, scale: 18468599.566171877 }, -->
				<!-- { level: 6, resolution: 0.021972656250000007, scale: 9234299.7830859385 }, -->
				<!-- { level: 7, resolution: 0.010986328125000003, scale: 4617149.8915429693 }, -->
				<!-- { level: 8, resolution: 0.0054931640625000017, scale: 2308574.9457714846 }, -->
				<!-- { level: 9, resolution: 0.0027465820312500009, scale: 1154287.4728857423 }, -->
				<!-- { level: 10, resolution: 0.0013732910156250004, scale: 577143.73644287116 }, -->
				<!-- { level: 11, resolution: 0.00068664550781250022, scale: 288571.86822143558 }, -->
				<!-- { level: 12, resolution: 0.00034332275390625011, scale: 144285.93411071779 }, -->
				<!-- { level: 13, resolution: 0.00017166137695312505, scale: 72142.967055358895 }, -->
				<!-- { level: 14, resolution: 0.000085830688476562527, scale: 36071.483527679447 }, -->
				<!-- { level: 15, resolution: 0.000042915344238281264, scale: 18035.741763839724 }, -->
				<!-- { level: 16, resolution: 0.000021457672119140632, scale: 9017.8708819198619 }, -->
				<!-- { level: 17, resolution: 0.000010728836059570316, scale: 4508.9354409599309 }, -->
				<!-- { level: 18, resolution: 0.0000053644180297851579, scale: 2254.4677204799655 }, -->
				<!-- { level: 19, resolution: 0.000002682209014892579, scale: 1127.2338602399827 }, -->
				<!-- { level: 20, resolution: 0.0000013411045074462895, scale: 563.61693011999137 }, -->
			]
		});
		let layer = new WebTileLayer({
			id: 'basemap1',
			urlTemplate:
				layerUrl+'?service=wmts&request=GetTile&layer='+'4c9fd962349f43d3b7036410495ecef6'+'&style=default&TileMatrixSet=default028mm&TileMatrix={level}&TileRow={row}&TileCol={col}&format=image/png&mapuserid=1',
			spatialReference: spatialReference,
			fullExtent: {
				xmin: 112.38089036582294,
				ymin: 22.64474851232277,
				xmax: 113.39020412865817,
				ymax: 23.575946433564027,
				spatialReference: spatialReference
			},
			tileInfo: tileInfo,
			opacity:1,
			});
		
		require(["esri/Map","esri/views/MapView"], function(Map, MapView) {
			var map = new Map({
				layers:	[layer],
				logo: false
			});
			// 在页面中呈现地图
			var view = new MapView({
			container: "mapViewDiv", // html dom元素id，用来作为地图视图容器
			map: map,// 地图对象
			zoom:9,
			spatialReference: spatialReference
			});
			view.ui.components = [];
		});
	});

</script>
</body>
</html>